<template>
  <view class="page-address">
    <view class="form">
      <uni-forms ref="form" :modelValue="data.form" :border="true" :rules="data.rules" label-width="70px">
        <uni-forms-item :label="$t('account.edit.input_avatar')" name="avatar">
          <view @click="changeAvatar" class="avatar-wrap">
            <image :src="data.form.avatar" class="avatar-img" mode="aspectFit" />
          </view>
        </uni-forms-item>
        <uni-forms-item :label="$t('account.edit.input_name')" name="name" required>
          <uni-easyinput :inputBorder="false" :clearable="false" type="text" v-model="data.form.name" placeholder="name" />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.edit.input_email')" name="email" required>
          <uni-easyinput :inputBorder="false" :clearable="false" type="text" v-model="data.form.email" placeholder="Email" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <view class="submit-wrap">
      <view @click="submit" class="btn-primary">{{ $t('common.btn_submit') }}</view>
    </view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const account = uni.getStorageSync('account');
import { t } from '@/locale/index'
import { requestHeader } from '@/common/util'
import config from '@/config.js'

let id = 0

const data = reactive({
  form: {
    name: account.name,
    email: account.email,
    avatar: account.avatar,
  },

  rules: {
    name: {
      rules: [{ required: true, errorMessage: t('common.error_required', {name: t('account.edit.input_name')}), trigger: 'blur' },]
    },
    email: {
      rules: [
        { required: true, errorMessage: t('common.error_required', {name: t('account.edit.input_email')}), trigger: 'blur' },
        { type: 'email', errorMessage: 'Please input correct email', trigger: 'blur' },
      ]
    },
  },
})

const loadData = () => {
  proxy.$http.get(`addresses/${id}`).then(res => {
    data.form = res.data
    proxy.$refs['address-choose'].setAddress(res.data)
  })
}

const changeAvatar = () => {
  const token = 'Authorization=Bearer ' + uni.getStorageSync('access-token');
  let baseUrl = config.apiBaseUrl

  // #ifdef H5
  baseUrl = 'api/'
  // #endif

  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    crop: {
      width: uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowWidth,
    },

    success(res) {
      const tempFilePaths = res.tempFilePaths

      uni.showLoading()
      uni.uploadFile({
        url: baseUrl + 'files?type=avatar',
        header: {
          'Authorization': 'Bearer ' + uni.getStorageSync('access-token'),
          'accept': 'application/json',
        },
        filePath: tempFilePaths[0],
        name: 'file',
        success(res) {
          const item = JSON.parse(res.data)
          data.form.avatar = item.data.url
        },
        fail(res) {
          // uni.showToast({ title: self.t('upload') })
        },
        complete() {
          uni.hideLoading()
        },
      })
    },
  })
}

const submit = () => {
  proxy.$refs.form.validate().then(() => {
    proxy.$http.put('me', data.form).then(res => {
      proxy.$util.msg({ title: res.message, icon: 'success' }, () => {
        uni.navigateBack()
      })
    })
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
